<template>
  <teleport to="#wxj_modal">
    <div id="wxj_modal_cover" v-if="isOpen">
      <h2>{{ title }}</h2>
      <div class="content">
        <slot>默认展示内容</slot>
      </div>
      <button class="btn2" @click="buttonClick">Close</button>
    </div>
  </teleport>
</template>
  
<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    isOpen: Boolean,
    title: {
      type: String,
      default: "提示",
    },
  },
  emits: {
    "close-modal": null,
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit("close-modal");
    };
    return {
      buttonClick,
    };
  },
});
</script>
  
  <style scoped lang="scss">
#wxj_modal_cover {
  padding:20px 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #666;
  width: 300px;
  
  border: 2px solid rgb(105, 165, 56);
  display:flex;
  flex-direction: column;
  justify-content:space-between
}
h2{
    text-align: center;
  }
  .content{
    margin: 20px 0;
    text-indent: 2em;
  }

.btn2 {
  margin: 0 auto;
  width:120px;
  background: #1971c9;
  border: none;
  padding: 8px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
</style>
  